<template>
  <div :class="['g-navbar', fixed ? 'fixed' : '', theme]">
    <span
      v-if="navBarLeftArrow"
      :class="['lefticon', leftArrowTheme]"
      @click="onClickLeft()"
    ></span>
    <!-- <img src="@/assets/left_arrow.svg" class="lefticon" /> -->
    <span class="title" :style="`color:${titleColor}`">{{ navBarTitle }}</span>
  </div>

  <div v-if="fixed" :class="['fixed-nav-placeholder', theme]"></div>
</template>

<script>
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  name: "NavBar",
  components: {},
  props: {
    title: { type: String, default: "" },
    titleColor: { type: String, default: "#000" },
    leftArrow: { type: Boolean, default: true },
    leftArrowTheme: { type: String, default: "white" },
    backPathName: String,
    backPathQuery: Object,
    backPathParams: Object,
    fixed: { type: Boolean, default: true },
    theme: { type: String, default: "white" },
  },
  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const navBarTitle = ref("");
    const navBarLeftArrow = ref(true);

    const onClickLeft = (e) => {
      if (props.backPathName) {
        router.push({
          name: props.backPathName,
          query: props.backPathQuery,
          params: props.backPathParams,
        });
      } else {
        router.go(-1);
      }
    };

    onMounted(() => {
      let titleInMeta = "";
      let leftArrowInMeta = false;
      let meta = route.meta || null;
      if (meta) {
        const { title, canGoBack, authRequired } = meta;
        if (meta.hasOwnProperty("title")) {
          titleInMeta = title;
        }
        if (meta.hasOwnProperty("canGoBack")) {
          leftArrowInMeta = canGoBack;
        }
        // if (meta.hasOwnProperty("authRequired")) {
        //   authRequired && router.replace("/login");
        // }
      }
      navBarTitle.value = props.title || titleInMeta;
      navBarLeftArrow.value =
        typeof props.leftArrow == "boolean" ? props.leftArrow : leftArrowInMeta;
    });

    // watch(
    //   () => route.path,
    //   (newPath) => {
    //     console.log("newPath, route.meta:", newPath, route.meta);
    //     if (route.meta) {
    //       const { title, canGoBack, authRequired } = route.meta;
    //       if (route.meta.hasOwnProperty("title")) {
    //         navBarTitle.value = title;
    //       }
    //       if (route.meta.hasOwnProperty("canGoBack")) {
    //         navBarLeftArrow.value = canGoBack;
    //       }
    //       // if (route.meta.hasOwnProperty("authRequired")) {
    //       //   authRequired && router.replace("/login");
    //       // }
    //     } else {
    //       navBarTitle.value = props.title;
    //       navBarLeftArrow.value = props.leftArrow;
    //     }
    //   }
    // );

    return {
      navBarTitle,
      navBarLeftArrow,
      onClickLeft,
    };
  },
};
</script>
<style lang="less" scoped>
.g-navbar {
  position: relative;
  height: 55px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0 16px 10px 16px;
  .lefticon {
    height: 20px;
    width: 22px;
    // transform: scale(1.5);
    // transform-origin: bottom center;
    background: url("@/assets/left_arrow.svg") center top / contain no-repeat;
    &.white {
      background: url("@/assets/left_arrow_white.svg") center top / contain
        no-repeat;
    }
  }
  .title {
    font-family: PingFangSC-Medium;
    font-size: 20px;
    line-height: 100%;
    color: #ffffff;
    letter-spacing: 0;
    margin-left: 11px;
  }

  &.fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  &.white {
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 8px 0 #dfe1e5;
  }

  &.plain {
    background-color: transparent;
    color: #fff;
  }
}
.fixed-nav-placeholder {
  height: 55px;
  width: 100%;
  background-color: transparent;
}
</style>